/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package parismetro;

import javafx.scene.CustomNode;
import javafx.scene.Node;
import javafx.scene.Group;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.CycleMethod;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.animation.Timeline;
import javafx.animation.Interpolator;
import javafx.scene.input.MouseEvent;
import javafx.animation.transition.SequentialTransition;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

/**
 * @author Hadrien
 */
public class DialogBox extends CustomNode {

    init {
        this.visible = false;
    }

    public var largeur: Integer;
    public var hauteur: Integer;
    public var main: Main;
    public var titre: String;
    public var corps: String;
    var rad: Integer = 100;
    var l: Integer = rad;
    var h: Integer = rad;
    public var afficher: Boolean = false on replace {
                if (this.visible == false) {
                    main.isDialogDiplayed = true;
                    this.visible = afficher;
                    SequentialTransition {content: [
                            Timeline {
                                repeatCount: 1
                                keyFrames: [
                                    at (200ms) {l => largeur tween Interpolator.EASEOUT}]
                            },
                            Timeline {
                                repeatCount: 1
                                keyFrames: [
                                    at (500ms) {h => hauteur tween Interpolator.EASEOUT}]
                            },

                        ]}.play();

                } else {
                    this.visible = afficher;
                    l = rad;
                    h = rad;
                    main.isDialogDiplayed = false;
                }
            };
    var header_footer = Rectangle {
                width: bind l;
                height: bind h;
                fill: Color.LIGHTSALMON;
                arcWidth: rad;
                arcHeight: rad;
            };
    var contenu = Rectangle {
                layoutY: rad / 2
                width: bind l;
                height: bind h - rad;
                fill: Color.WHITE;
            };
    var txtTitre = Text {
                layoutX: rad / 2 - 10
                layoutY: rad / 2 - 10
                clip: Rectangle {
                    layoutX: -rad / 2 + 10
                    layoutY: -rad / 2 + 10
                    width: bind l - 20;
                    height: bind h;}
                font: Font { size: 32, embolden: true, name: "Myriad Pro" }
                content: bind titre;
            };
    var txtContenu = Text {
                layoutX: 10
                layoutY: rad/2 + 20
                wrappingWidth: bind l - 30
                clip: Rectangle {
                    layoutX: - 10
                    layoutY: -rad/2
                    width: bind l - 20;
                    height: bind h - rad + 20;}
                font: Font { size: 18, embolden: true, name: "Myriad Pro" }
                content: bind corps;
            };
    var txtFooter = Text {
                layoutX: rad / 2 - 10
                layoutY: bind h - 10
                clip: Rectangle {
                    layoutX: -rad / 2 + 10
                    layoutY: bind 10 - h
                    width: bind l - 20;
                    height: bind h;}
                font: Font { size: 32, embolden: true, name: "Myriad Pro" }
                content: "Touchez l'écran pour fermer.";
            };

    def exitBtn = ImageView {
                image: Image { url: "{__DIR__}icons/exit.png" }
                fitWidth: 25;
                fitHeight: 25;
                layoutX: bind largeur - 50;
                y: 10;
            //layoutX:0
            //layoutY:0
    }
    var dialog: Group = Group {
                layoutX: bind ((1024 - l) / 2)
                layoutY: bind ((768 - h) / 2)
                content: [header_footer, contenu, txtTitre, txtFooter, txtContenu, exitBtn]
            }
    var g: Group;
    var fond: Rectangle = Rectangle {
                width: 1024, height: 768
                fill: LinearGradient {
                    cycleMethod: CycleMethod.REPEAT
                    startX: 0.0
                    startY: 0.0
                    endX: 0.002
                    endY: 0.001
                    stops: [
                        Stop {
                            color: Color.WHITE
                            offset: 0.0
                        },
                        Stop {
                            color: Color.BLACK
                            offset: 1.0
                        },
                    ]
                }
                opacity: 0.6
            }

    override function create(): Node {
        g = Group {
                    content: [fond, dialog]
                    onMousePressed: function(e: MouseEvent): Void {
                        main.logger.addEvent("dialog", "ecran", "previousScreen");
                        afficher = false;
                    }
                }
        return g;
    }

}
